<template>
    <div class="itemMusicList">
        <div class="itemListTop">
            <div class="itemListTop-left">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofang1"></use>
                </svg>
                <p>
                    <strong>播放全部</strong>
                    <span>(共{{ itemList.length }}首)</span>
                </p>
            </div>
            <div class="itemListTop-right">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jiahao"></use>
                </svg>
                <span>收藏({{ subscribedCount }})</span>
            </div>
        </div>
        <div class="itemList">
            <div class="item" v-for="(item, i) in  itemList" :key="i">
                <div class="itemLeft" @click="playMusic(i)">
                    <span class="leftSpan">{{ i + 1 }}</span>
                    <div class="song">
                        <span class="songName">{{ item.name }}</span> <br>
                        <span class="songer" v-for="(item1, index) in item.ar" :key="index">
                            {{ item1.name }}
                        </span>
                    </div>
                </div>
                <div class="itemRight">
                    <svg class="icon" aria-hidden="true" v-if="item.mv != 0">
                        <use xlink:href="#icon-shipin"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31liebiao"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
    name: 'HtmlItemMusicList',

    setup(props) {
        // console.log(props);
    },
    props: ['itemList', 'subscribedCount'],
    methods: {
        playMusic(i) {
            this.updataPlayList(this.itemList)
            this.updataPlayListIndex(i)
        },
        ...mapMutations(['updataPlayList', 'updataPlayListIndex'])
    },

};
</script>

<style lang="less" scoped>
.itemMusicList {
    width: 100%;
    border-radius: .4rem .4rem 0 0;
    background: #fff;
    margin-top: .4rem;
    overflow: hidden;

    .itemListTop {
        display: flex;
        justify-content: space-between;
        margin: .2rem;

        .itemListTop-left {
            width: 42%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
                color: #aca9a9;
                font-size: .28rem;
            }
        }

        .itemListTop-right {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 34%;
            height: .64rem;
            background: red;
            color: #fff;
            border-radius: .4rem;

            .icon {
                width: .44rem;
                height: .44rem;
            }
        }
    }

    .itemList {
        .item {
            width: 100%;
            height: 1.2rem;
            padding: 0 .2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .itemLeft {
                display: flex;
                align-items: center;

                .leftSpan {
                    width: .5rem;
                    height: .5rem;
                    font-size: .32rem;
                    text-align: center;
                    margin-right: .2rem;
                }

                .song {
                    .songName {
                        font-weight: 900;
                    }

                    .songer {
                        font-size: 12px;
                        color: #333;
                    }
                }
            }

            .itemRight {
                width: 20%;
                display: flex;
                justify-content: end;

                .icon {
                    margin: 0 5px;
                }
            }

        }

    }
}
</style>